<template>
  <u-popup
    :show="visible"
    :safeAreaInsetBottom="false"
    mode="center"
    round="24rpx"
    @close="hide"
  >
    <div class="modal-content">
      <view
        class="modal-body"
        @click.stop
        v-if="visible"
        :style="{
          backgroundImage: `url(${bg})`,
        }"
      >
        <div class="title" v-if="pubUserInfo">
          {{ pubUserInfo.pubDomainShopVo.shopName }}
        </div>
        <image class="qrcode" :src="qrcode" />
        <div class="btn flexAIC">
          <div class="flexJCC flex-wrap" @click="handleLeftBtnClick">
            <image :src="phone" class="btn-icon" />
            <div class="btn-text">保存到手机</div>
          </div>
          <!--        open-type="share"-->
          <button class="flexJCC flex-wrap default-button" @click="handleShare">
            <image :src="wechat" class="btn-icon" />
            <div class="btn-text">分享到微信</div>
          </button>
        </div>
      </view>
    </div>

    <u-popup
      :show="showAuthorized"
      :safeAreaInsetBottom="false"
      mode="center"
      round="24rpx"
    >
      <view class="authorized-container">
        <image
          src="https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/39/20230403/90bd42b7-8299-41ff-a6cf-623e16310367.png"
          class="authorized-icon"
        />
        <div class="title">温馨提示</div>
        <div class="tips">保存失败，请您开启添加到相册权限后重试。</div>
        <div class="btn flexAIC">
          <div class="default-button left" @click="showAuthorized = false">
            取消
          </div>
          <button open-type="openSetting" class="default-button right">
            确认
          </button>
        </div>
      </view>
    </u-popup>
  </u-popup>
</template>
<script>
import { mapState } from "vuex";
import { getWxAppPageQrcode } from "@/service/api/sp-common";

export default {
  name: "ShareModal",
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
    ...mapState("sp-common/auth", ["pubUserInfo"]),
  },
  props: {
    // 是否显隐
    visible: {
      type: Boolean,
      default: false,
    },
    // z-index 层级
    zIndex: {
      type: Number,
      default: 11,
    },
  },
  data() {
    return {
      qrcode: "",
      bg: "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/39/20230403/24671d50-74f2-42c8-b54b-300479c0cf79.png",
      ossBaseUrl: process.env.VUE_APP_BASE_FileUrl,
      phone:
        "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/3384/20230331/cd628622-d0aa-4fb5-8d6c-c5785ab360f5.png",
      wechat:
        "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/3384/20230331/e87e92f8-17e7-4587-9f67-07a3fe42f681.png",
      showAuthorized: false,
    };
  },
  created() {
    this.getQRCode();
  },
  methods: {
    async getQRCode() {
      let mpPath = "";
      if (
        this.pubUserInfo?.pubDomainShopVo?.pubTag === 1 &&
        this.pubUserInfo?.pubDomainShopVo?.shopType === 3
      ) {
        mpPath = `pages/sp-store/pages/business-district-index-page/index?shopId=${this.pubUserInfo.pubDomainShopVo.id}`;
      } else {
        mpPath = `pages/sp-store/pages/shop-index/index?shopId=${this.pubUserInfo.pubDomainShopVo.id}`;
      }
      const res = await getWxAppPageQrcode({
        appId: process.env.VUE_APP_PUB_USER_WX_APP_ID,
        page: mpPath,
        type: process.env.NODE_ENV === "production" ? 0 : 2,
      });
      if (res) {
        this.qrcode = res;
      }
    },
    open() {
      this.$emit("update:visible", true);
    },
    hide() {
      console.log("关闭");
      this.$emit("update:visible", false);
    },
    handleLeftBtnClick() {
      uni.getSetting({
        success: (res) => {
          if (
            res?.authSetting.hasOwnProperty("scope.writePhotosAlbum") &&
            !res.authSetting["scope.writePhotosAlbum"]
          ) {
            this.showAuthorized = true;
          } else {
            uni.downloadFile({
              url: this.qrcode,
              success: (res) => {
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: (rees) => {
                    if (rees?.errMsg === "saveImageToPhotosAlbum:ok") {
                      this.hide();
                      uni.showToast({
                        title: "保存成功",
                        icon: "success",
                      });
                    }
                  },
                  fail: () => {
                    uni.getSetting({
                      success: (res) => {
                        if (
                          res?.authSetting.hasOwnProperty(
                            "scope.writePhotosAlbum"
                          ) &&
                          !res.authSetting["scope.writePhotosAlbum"]
                        ) {
                          this.showAuthorized = true;
                        }
                      },
                    });
                    // this.showAuthorized = true;
                  },
                });
              },
            });
          }
        },
      }); // this.$emit("update:visible", false);
      // this.$emit("cancel");
      // this.hide();
    },
    handleRightBtnClick() {
      // this.$emit("confirm");
      this.hide();
    },
    handleShare() {
      uni.downloadFile({
        url: this.qrcode,
        success: (res) => {
          uni.showShareImageMenu({
            path: res.tempFilePath,
          });
        },
        fail: (res) => {
          console.log(res);
          if (
            res.errMsg.indexOf("deny") !== -1 ||
            res.errMsg.indexOf("denied") !== -1
          ) {
            uni.showToast({
              title: "保存相册失败，请设置权限！",
              icon: "none",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "保存相册失败，请重试！",
              icon: "none",
              duration: 2000,
            });
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.modal-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal-body {
    width: 600rpx;
    height: 800rpx;
    background-color: #fff;
    border-radius: 24rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .title {
      position: absolute;
      color: white;
      margin-top: 73rpx;
      width: 100%;
      text-align: center;
    }
    .qrcode {
      position: absolute;
      width: 280rpx;
      height: 280rpx;
      margin-top: 235rpx;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    .btn {
      position: absolute;
      margin-top: 559rpx;
      margin-left: 50%;
      transform: translateX(-50%);
      .btn-icon {
        width: 60rpx;
        height: 60rpx;
      }
      .btn-text {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        background: white;
        padding: 0 !important;
        text-align: center;
        line-height: inherit;
        margin: 13rpx 0 0 0;
      }
      .default-button {
        line-height: inherit;
        padding: 0 !important;
        margin: 0 !important;
        background: white;
      }
    }
  }
}
.authorized {
  &-container {
    width: calc(600rpx - 78 * 2rpx);
    padding: 40rpx 78rpx;
    text-align: center;
    .title {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #131313;
      padding: 35rpx 0;
    }
    .tips {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
      line-height: 42rpx;
      opacity: 0.7;
      margin-bottom: 35rpx;
      text-align: left;
    }
    .btn {
      justify-content: space-between;
      .default-button {
        width: 212rpx;
        height: 88rpx;
        line-height: 88rpx;
        border: 1px solid #ffb72f;
        border-radius: 44rpx;
        font-size: 28rpx;
      }
      .left {
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffb72f;
      }
      .right {
        color: white;
        background: #ffb72f;
      }
    }
  }
  &-icon {
    width: 183rpx;
    height: 180rpx;
    margin: 0 auto;
  }
}
</style>
